<template>
  <div>
    <div class="mp-ticket-shelf">
      <div
        class="mp-ticket-shelf-container"
        v-for="(item, index) of list"
        :key="index"
      >
        <h3 class="mp-ticket-type-new">{{ item.title }}</h3>
        <div v-for="(item2, index2) of item.children" :key="index2">
          <p class="mp-ticket-shelf-name">
            <span class="mp-ticket-shelf-border"></span>
            <span>{{ item2.title }}</span>
          </p>
          <div class="mp-ticket-type-list">
            <div class="mp-ticket-group">
              <div
                class="item border-bottom"
                v-for="(item3, index3) of item2.children"
                :key="index3"
              >
                <div class="item-title">
                  <h5 class="mp-ticket-type-name">{{ item3.title }}</h5>
                  <div class="mp-ticket-type-price">
                    ￥<em class="mp-price-num">{{ item3.price }}</em>
                    <span class="mp-ticket-numword">起</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailList",
  props: {
    list: Array
  }
};
</script>

<style lang="stylus" scoped>
.mp-ticket-shelf
  background: #f5f5f5
  .mp-ticket-shelf-container
    padding: 0 0.16rem 0.32rem
    background: #fff
    margin-bottom: 0.2rem
    .mp-ticket-type-new
      overflow: hidden
      position: relative
      z-index: 4
      background: #fff
      color: #212121
      font-size: 0.4rem
      line-height: 0.56rem
      font-weight: bold
      padding: 0.32rem 0 0 0.04rem
    .mp-ticket-shelf-name
      font-size: 0.32rem
      line-height: 0.44rem
      font-weight: bold
      color: #212121
      align-items: baseline
      display: flex
      padding-top: 0.28rem
      .mp-ticket-shelf-border
        background-image: linear-gradient(126deg, #00e0ca 0, #00bfd4 100%)
        border-radius: 0.06rem
        height: 0.24rem
        min-width: 0.08rem
        margin-right: 0.12rem
    .mp-ticket-type-list
      background: #f5f5f5
      margin-top: 0.32rem
      .mp-ticket-group:first-of-type
        margin-top: 0
      .mp-ticket-group
        margin-bottom: 0.2rem
        background: #fff
        box-shadow: 0 0.04rem 0.12rem 0 rgba(0, 0, 0, 0.1)
        border-radius: 0.16rem
        .item
          overflow: hidden
          padding: 0.32rem 0
          margin: 0 0.2rem
          .item-title
            position: relative
            z-index: 2
            margin-bottom: -0.02rem
            background: #fff
            .mp-ticket-type-name
              margin-right: 1.8rem
              color: #333
              font-size: 0.3rem
              line-height: 0.48rem
            .mp-ticket-type-price
              right: 0.52rem
              margin-top: -0.28rem
              color: #ff9800
              font-size: 0.24rem
              position: absolute
              top: 50%
              .mp-price-num
                margin-left: 0.04rem
                font-size: 0.4rem
              .mp-ticket-numword
                display: inline-block
                font-size: 0.24rem
                -webkit-transform: scale(0.8)
                -moz-transform: scale(0.8)
                -ms-transform: scale(0.8)
                -o-transform: scale(0.8)
                transform: scale(0.8)
</style>
